<template>
	<div id="home">
		<div class="upperTop">
			<div class="logo-title"></div>
			<div class="sys-name">
				综合漏洞扫描系统
			</div>
			<!-- <div class="loginOut">
				 <span class="iconfont icon-yonghu4"></span><span class="name">{{ username }}</span>
				<el-button type="text" class="quitBtn" @click="signOut()"><span class="iconfont icon-dianyuan1"></span></el-button> 
			</div>
			-->
		</div>
		<div class="main-contents">
			<div class="left" :class="{ foldAble: menuCollapse }">
				<div>
					<!-- <div class="systitle">
						<i class="iconfont icon-tianchongxing-"></i>&nbsp;&nbsp;光缆在线监测系统
					</div> -->
					<el-menu :default-active="activeIndex" router class="menu" @select="handleSelect" unique-opened>
						<div v-for="(item, index) in menulist" :key="index">
							<el-submenu v-if="item.children && item.children.length > 0" :index="item.url" :disabled="item.disabled">
								<template slot="title">
									<i class="iconfont" :class="item.icon"></i>&nbsp;&nbsp;
									<span slot="title">{{ item.name }}</span>
								</template>
								<el-menu-item v-for="(one, iindex) in item.children" :key="iindex" :index="one.url" class="menu-item-two"
								 :disabled="one.disabled"><i class="iconfont" :class="one.icon"></i>&nbsp;&nbsp;{{
                    one.name
                  }}</el-menu-item>
							</el-submenu>
							<el-menu-item v-else :index="item.url" :disabled="item.disabled" class="menu-item-one">
								<i class="iconfont" :class="item.icon"></i>&nbsp;&nbsp;
								<span slot="title">{{ item.name }}</span>
							</el-menu-item>
						</div>
					</el-menu>
				</div>
				<div class="foldMenu" @click="clickFold"></div>
			</div>
			<!-- :class="{'foldAble':menuCollapse}" -->
			<div class="right foldAble">
				<div class="contant">
					<router-view ref="onePage"></router-view>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	// @ is an alias to /src
	//import navList from "../assets/json/menu.json"
	export default {
		name: 'home',
		//mixins: [socketInit],
		data() {
			return {
				username: '',
				menuCollapse: false,
				menulist: [{
						name: '扫描任务',
						url: '/scan/list',
					},
					{
						name: '扫描目标',
						url: '/scan/target',
					},
					{
						name: '端口集合',
						url: '/scan/portlist',
					}
				],
			}
		},
		computed: {
			// username() {
			// 	return this.$store.state.user.username;
			// },
			activeIndex() {
				let _this = this
				var s = this.$route.path
				let ss = s.split('/')
				console.log(s)
				return s
			},
			// menulist() {
			// 	let _this = this;
			// 	return _this.$store.state.menu;
			// 	//return navList;
			// },
		},
		created() {},
		mounted() {
			let _this = this
			console.log('home')
		},
		methods: {
			//退出
			async signOut() {
				let _this = this
				let token = _this.$store.state.user.token
				let user = {
					user: {
						username: '',
						token: '',
					},
				}
				this.$store.commit('changeUser', user)
				this.$store.commit('changeMenu', [])
				this.$router.push({
					path: '/',
				})
			},
			//切换导航
			handleSelect(key, keyPath) {
				let _this = this
				let route = {
					path: key,
				}
				_this.$router.push(route)
			},
			//点击折叠
			clickFold() {
				let _this = this
				let a = !_this.menuCollapse
				_this.menuCollapse = a
				_this.$store.commit('changeMenuCollapse', a)
			},
		},
	}
</script>
<style lang="scss">
	@import "assetsCss/variable.scss";
	@import "assetsCss/home.scss";

	.sys-name {
		color: #fff;
		font-size: 25px;
		font-weight: 550;
		text-shadow: 0 0 10px #00d0ff;
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.el-table td {
		color: #000;
		border-bottom-color: none;
	}
</style>
